<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>悬停下拉列表</title>
		<style type="text/css">
			ul{
				list-style-type:none;
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #333333;
			}
			li{
				display: inline;
				float: left;
			}
			li a{
				display: block;
				color: white;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
			}
			li a:hover{
				background-color: #111;
			}
			.a{
				display: block;
				width: 100px;
			}
			.a:visited{
				background-color: palegreen;
			}
			.chan:link{
				background-color: #00B03E;
			}
			.active{
				background-color: #4CAF50;
			}
			.c1{
				list-style-type: none;
				margin: 0;
				padding:0;
				width: 100px;
				color: #333333;
			}
			
			.c1:hover{
				background-color:white;
				color:black;
			}
			.c2{
				background-color: #333333;
				color:white;
				padding: 16px;
				font-size: 16px;
				border: none;
				cursor: pointer;
				display: block;
				text-decoration: none;
			}
			.c{
				position: relative;
				display: inline-block;
			}
			.c3{
				display: none;
				position: absolute;
				background-color: #f9f9f9;
				min-width: 96px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			}
			.c3 a{
				color: black;
				padding: 12px 16px;
				text-decoration: none;
				display: block;
			}
			.c3 a:hover{
				background-color: #F1F1F1;
			}
			.c1:hover .c3{
				display: block;
			}
			.c1:hover .c2{
				background-color: #3e8e41;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#" class="chan">产品</a></li>
			<li><a href="#">大数据</a></li>
			<li class="c1"><a href="#" class="c2">解决方案</a>
				<ul class="c3">
					<li><a href="#">移动模块</a></li><br />
					<li><a href="#">后台模块</a></li><br />
					<li><a href="#">电商平台</a></li><br />
				</ul>
			</li>
			<li><a href="#">社区</a></li>
		</ul>
	</body>
</html>
